<!-- 使用插槽 -->
<template> 
  <waike title="index">
    <template #tab_slot>
    <!-- 顶部导航栏position:absolute;-->
    <div>
      <van-tabs @click="active_attention($event)" class="index-tabs" v-model="active_tab" swipeable>
        <van-tab title="关注" name="attention"></van-tab>
        <van-tab title="推荐" name="recommend"></van-tab>
        <van-tab title="分类" name="sort"></van-tab>
      </van-tabs>
    </div>
    </template>
    <template>
    <!-- 这是首页  关注... -->
      <!-- 内容 -->
      <div v-for="i in 5" :key="i" class="at_content">
        <van-image class="at_image"
          round width="2rem" height="2rem"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
        <!-- 用户名 -->
        <h4 class="at_h4">蜂蜜四叶草</h4>
        <!-- 关注按钮 -->
        <van-button  class="at_btn"
          @click="attention($event)"
          text="关注" 
          color="red"
          square>
        </van-button>
        <!-- 文字内容div，可调节高度 -->
        <div class="at_context">
          <!-- 内容模块 -->
          <span class="at_text" v-for="i in 10" :key="i">这是内容</span>
          <!-- 图片 -->
          <div class="image_cont">
            <div v-for="(i,index) in 6" :key="index" class="att_img">
              <img style="" width="100%" height="100%"   src="../../public/images/384-360x440.jpg" alt="" > 
            </div>
          </div>
        </div>
        <!-- 底部导航 -->
        <van-tabbar v-model="active_bar" active-color="#ee0a24">
        <van-tabbar-item name="home" icon="home-o" to="/">首页</van-tabbar-item>
        <van-tabbar-item name="collection" icon="star-o" to="/collection">收藏</van-tabbar-item>
        <van-tabbar-item name="me" icon="friends-o" to="/me">我的</van-tabbar-item>
        </van-tabbar>
      </div>
    </template>
  </waike>
</template>
<script>
import waike from "../components/waike.vue";
export default {
  components:{waike},
  data() {
    return {
      active_tab: "attention",
      value:'',
      active_bar:'home',
    };
  },
  methods: {
    attention(e){
        if(e.target.style.background=="red"){
          e.target.innerHTML="已关注";
          e.target.style.background="#BEBEBE";
          // 已关注提示信息
          this.$toast.success({message: '已关注',icon: 'like-o',}); 
        }else{
        // 取消关注
          e.target.style.background="red";
          e.target.innerHTML="关注";
          this.$toast.success({message: '取消关注',icon: 'cross',});
        }
    },
    onSearch(val) {
      // Toast(val);
      console.log(val)
    },
    active_attention(e){
      if(e=="recommend"){
        // this.activeName="recommend";
        this.$router.push("/");
      }else if(e=="sort"){
        // this.activeName="sort";
        this.$router.push("/sort");
      }
    },

  },
}
</script>

<style scoped>

/* 内容 */
body {
  margin: 4px;
  font-family: Helvetica;
  /* Centering & Limit Width */
  margin: auto;
  width: 720px;
}
.at_content{
  /* background-color:rgb(233, 230, 230); */
  overflow-x: hidden;
  text-align:left;
  margin-bottom:0.5rem;
  padding-bottom:2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.at_content .at_image {
  position:relative; 
  top:0.8rem; left:1rem;
}
.at_content .at_h4{
  position:relative; 
  top:-1rem; left:3.5rem;
  margin: 0;
}
.at_content .at_btn{
  position:relative;
  top:-2.5rem; left:80%;
  border: 1px;
  border-radius:8px;
  width:3.7rem;height:2.4em;
  font-size:0.8rem;
  padding:0.5rem;
  visibility:visible
}
.at_content .at_context{
  /* background-color:whitesmoke;  */
  width:95%;
  margin-top: -2rem;
  padding: 0.6rem ;
}
.at_content .at_text{
  position: relative;
  top:0rem;
  left: 0;
}
.at_content .image_cont{
  width:22.3rem;
  display: flex; 
  flex-wrap:wrap;
  justify-content:first baseline;
  margin-top:1rem;
  border-radius:0.7rem;
  overflow-x: auto;
  padding-bottom:-5rem;
}
.at_content .att_img{
  border:1px solid #666;
  width:7rem; height:7rem;
  margin-bottom:0.2rem;
  margin-right: 0.3rem;
}
</style>
